<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工单系统 - 登录</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            padding-top: 50px;
        }
        .login-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .login-header {
            text-align: center;
            margin-bottom: 20px;
        }
        .login-header h1 {
            color: #3949ab;
            font-size: 24px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .alert {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-container">
            <div class="login-header">
                <h1>工单系统</h1>
                <p class="text-muted">请登录以继续</p>
            </div>
            
            <div class="alert alert-danger" id="error-message"></div>
            <div class="alert alert-success" id="success-message"></div>
            
            <form id="login-form">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" placeholder="请输入密码" required>
                </div>
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary" id="login-button">登录</button>
                </div>
            </form>
            
            <hr>
            <div class="text-center">
                <p>还没有账号？ <a href="#" id="show-register">注册新账号</a></p>
            </div>
        </div>
        
        <div class="login-container mt-4" id="register-container" style="display: none;">
            <div class="login-header">
                <h1>注册新账号</h1>
                <p class="text-muted">创建一个新的账号</p>
            </div>
            
            <div class="alert alert-danger" id="register-error-message"></div>
            
            <form id="register-form">
                <div class="form-group">
                    <label for="register-username">用户名</label>
                    <input type="text" class="form-control" id="register-username" placeholder="请输入用户名" required>
                </div>
                <div class="form-group">
                    <label for="register-password">密码</label>
                    <input type="password" class="form-control" id="register-password" placeholder="请输入密码" required>
                </div>
                <div class="form-group">
                    <label for="register-email">邮箱</label>
                    <input type="email" class="form-control" id="register-email" placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                    <label for="register-real-name">真实姓名</label>
                    <input type="text" class="form-control" id="register-real-name" placeholder="请输入真实姓名">
                </div>
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-success" id="register-button">注册</button>
                </div>
            </form>
            
            <hr>
            <div class="text-center">
                <p>已有账号？ <a href="#" id="show-login">返回登录</a></p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 检查是否已经登录
            const token = localStorage.getItem('token');
            if (token) {
                // 已登录，直接跳转到工单页面
                window.location.href = '/static/tickets.html';
                return;
            }
            
            // 登录表单提交
            document.getElementById('login-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                const loginButton = document.getElementById('login-button');
                
                const errorMessage = document.getElementById('error-message');
                const successMessage = document.getElementById('success-message');
                
                errorMessage.style.display = 'none';
                successMessage.style.display = 'none';
                
                // 禁用登录按钮，显示加载状态
                loginButton.disabled = true;
                loginButton.innerHTML = '登录中...';
                
                // 发起登录请求
                fetch('/api/users/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password
                    })
                })
                .then(response => {
                    // 检查响应状态
                    if (!response.ok) {
                        // 服务器返回错误状态码
                        if (response.status === 401) {
                            throw new Error('用户名或密码错误');
                        } else if (response.status === 500) {
                            throw new Error('服务器内部错误，请稍后再试');
                        } else {
                            throw new Error('登录请求失败，请稍后再试');
                        }
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.code === 200) {
                        // 登录成功，保存 token 到 localStorage
                        localStorage.setItem('token', data.data.token);
                        localStorage.setItem('user', JSON.stringify(data.data.user));
                        
                        // 显示成功消息
                        successMessage.textContent = '登录成功，正在跳转...';
                        successMessage.style.display = 'block';
                        
                        // 延迟跳转到工单列表页面
                        setTimeout(() => {
                            window.location.href = '/static/tickets.html';
                        }, 1000);
                    } else {
                        // 显示错误消息
                        errorMessage.textContent = data.message || '登录失败，请检查用户名和密码';
                        errorMessage.style.display = 'block';
                        
                        // 恢复登录按钮
                        loginButton.disabled = false;
                        loginButton.innerHTML = '登录';
                    }
                })
                .catch(error => {
                    console.error('登录请求出错:', error);
                    errorMessage.textContent = error.message || '登录请求失败，请稍后再试';
                    errorMessage.style.display = 'block';
                    
                    // 恢复登录按钮
                    loginButton.disabled = false;
                    loginButton.innerHTML = '登录';
                });
            });
            
            // 注册表单提交
            document.getElementById('register-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const username = document.getElementById('register-username').value;
                const password = document.getElementById('register-password').value;
                const email = document.getElementById('register-email').value;
                const realName = document.getElementById('register-real-name').value;
                const registerButton = document.getElementById('register-button');
                
                const errorMessage = document.getElementById('register-error-message');
                errorMessage.style.display = 'none';
                
                // 禁用注册按钮，显示加载状态
                registerButton.disabled = true;
                registerButton.innerHTML = '注册中...';
                
                // 发起注册请求
                fetch('/api/users/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password,
                        email: email,
                        real_name: realName
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        if (response.status === 400) {
                            // 尝试解析错误信息
                            return response.json().then(data => {
                                throw new Error(data.message || '注册失败，请检查输入信息');
                            });
                        } else {
                            throw new Error('注册请求失败，请稍后再试');
                        }
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.code === 201) {
                        // 注册成功，显示成功消息并切换到登录页面
                        const successMessage = document.getElementById('success-message');
                        successMessage.textContent = '注册成功，请登录';
                        successMessage.style.display = 'block';
                        
                        // 清空表单
                        document.getElementById('register-form').reset();
                        
                        // 切换到登录页面
                        showLogin();
                    } else {
                        // 显示错误消息
                        errorMessage.textContent = data.message || '注册失败，请检查输入信息';
                        errorMessage.style.display = 'block';
                        
                        // 恢复注册按钮
                        registerButton.disabled = false;
                        registerButton.innerHTML = '注册';
                    }
                })
                .catch(error => {
                    console.error('注册请求出错:', error);
                    errorMessage.textContent = error.message || '注册请求失败，请稍后再试';
                    errorMessage.style.display = 'block';
                    
                    // 恢复注册按钮
                    registerButton.disabled = false;
                    registerButton.innerHTML = '注册';
                });
            });
            
            // 切换显示注册表单
            document.getElementById('show-register').addEventListener('click', function(e) {
                e.preventDefault();
                showRegister();
            });
            
            // 切换显示登录表单
            document.getElementById('show-login').addEventListener('click', function(e) {
                e.preventDefault();
                showLogin();
            });
            
            function showRegister() {
                document.querySelector('.login-container').style.display = 'none';
                document.getElementById('register-container').style.display = 'block';
            }
            
            function showLogin() {
                document.querySelector('.login-container').style.display = 'block';
                document.getElementById('register-container').style.display = 'none';
            }
        });
    </script>
</body>
</html> 